<template>
  <view class="maskBox" @click="addStep">
    <view class="bodyBG" :style="'top:'+ top + 'left:' + left">
      <view class="bodtText" :class="'bodtText'+step">{{text}}</view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    globalData () {
      return this.$store.state.globalData
    },
    top(){
      return `calc(630rpx + ${this.globalData.navHeight}px);`
    },
    left(){
      if(this.step === 1){
        return '28rpx;'
      }else if(this.step === 2){
        return '266rpx;'
      }else{
        return '508rpx;'
      }
    },
    text(){
      if(this.step === 1){
        return '挑选可以带货的佣金商品'
      }else if(this.step === 2){
        return '管理你的带货商品 '
      }else{
        return '上传你的自营商品'
      }
    }
  },
  data() { 
    return {
      step: 1
    }
  },
  methods: {
    addStep(){
      if(this.step < 3){
        this.step++
      }else{
        this.$emit('close')
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.maskBox{
  position: fixed;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  .bodyBG{
    position: absolute;
    z-index: 1001;
    width:216rpx;
    height:216rpx;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,.6) 0  0  0  100vh;
  }
  .bodtText{
    position: absolute;
    z-index: 1002;
    color: #FFF;
    bottom: -50rpx;
    white-space:nowrap;
    font-size: 32rpx;
    left: 0rpx;
  }
  .bodtText2{
    left: -14rpx;
  }
  .bodtText3{
    left: initial;
    right: 0 !important;
  }
}

</style> 